<template>
<div>
  <div class="v1">
    <!--头像上传-->
    <el-upload
        style="display: inline"
        :on-success="onSuccess"
        action="http://localhost:9000/user/oss/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove" class="ip1">
      <i class="el-icon-plus" ></i>
    </el-upload>
    <br>
    <el-button @click="profilePicture()">立即使用</el-button>
  </div>

</div>

</template>

<script>
import {Modification} from "../api/user/user";

export default {
  name: "head",
  data(){
    return{
      dialogImageUrl: '',
      userid:'',
    }
  },created() {
    var _this=this;
    var user=JSON.parse(sessionStorage.getItem('user'));
    if (user){
      _this.userid = user.userId;
    }
  },methods:{
    handleRemove(file, fileList) {
      this.$http.post("user/oss/deleteFile",{fileName:this.dialogImageUrl}).then(res=>{
        console.log(res.data);
        if (res.data=="success"){
          this.dialogImageUrl='';
        }else{
          this.$message.error('删除失败！请重新操作');
        }
      });
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
    },
    onSuccess(response, file, fileList) {
      console.log("图片路径=" + response.returnFileUrl)
      this.dialogImageUrl=response.returnFileUrl;
    },
    profilePicture(){
      if (this.dialogImageUrl!=''&&this.dialogImageUrl!=null){
        Modification(this.userid,this.dialogImageUrl).then(result=>{
          if (result.data>0){
            var user=JSON.parse(sessionStorage.getItem('user'));
            user.userImgsrc=this.dialogImageUrl;
            console.log(user.userImgsrc)
            sessionStorage.setItem('user',JSON.stringify(user));
            //console.log("成功")
            this.$router.go(0)
          }else{
            this.$message.error('上传异常！请重新上传');
          }
        })
      }else{
        this.$message.error('使用失败！请重新上传');
      }
    },
  }
}
</script>

<style scoped>
.v1{
  width: 400px;
  height: 300px;
  position: relative;
}
</style>
